<template>
  <div class="ordinary-withdrawal pd-20">
    <el-input v-model="param.searchCondition"
              placeholder="请输入用户名"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-input v-model="param.hospitalName"
              placeholder="请输入执业单位"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-date-picker v-model="time"
                    type="datetimerange"
                    value-format="yyyy-MM-dd"
                    clearable
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changeTime">
    </el-date-picker>
    <el-select v-model="param.doctorTitleName"
               placeholder="请选择角色"
               clearable
               @change="handleQuery"
               @clear="handleQuery"
               class="w-200">
      <el-option v-for="it in doctorTitleNameList"
                 :key="it.id"
                 :label="it.name"
                 :value="it.name"></el-option>
    </el-select>
    <el-select v-model="param.status"
               placeholder="请选择审核状态"
               clearable
               @change="handleQuery"
               @clear="handleQuery"
               class="w-200">
      <el-option label="待审核"
                 :value="0"></el-option>
      <el-option label="通过"
                 :value="1"></el-option>
      <el-option label="驳回"
                 :value="-1"></el-option>
    </el-select>
    <el-select v-model="param.withdrawStatus"
               placeholder="请选择提现状态"
               clearable
               @change="handleQuery"
               @clear="handleQuery"
               class="w-200">
      <el-option label="成功"
                 :value="0"></el-option>
      <el-option label="失败"
                 :value="-1"></el-option>
    </el-select>
    <el-button @click="handleQuery"
               type="primary">查 询</el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row}">
        <el-button type="success"
                   v-if="row.status === 0 && row.withdrawStatus !== 1"
                   @click="handleRowClick(row, 'transfer')">转 账</el-button>
        <el-button type="danger"
                   v-if="row.status === 0"
                   @click="handleRowClick(row, 'reject')">驳 回</el-button>
      </template>
      <template v-slot:status="{row}">
        <el-popover placement="top-start"
                    title="驳回理由"
                    width="200"
                    trigger="hover"
                    :content="row.rejectReason">
          <el-tag slot="reference"
                  type="danger"
                  v-if="row.status === -1">驳回</el-tag>
        </el-popover>
        <span v-if="row.status === 0">待审核</span>
        <span v-if="row.status === 1">审核成功</span>
      </template>

    </element-table>
    <el-dialog title="驳回理由"
               :visible.sync="dialogVisible"
               width="30%"
               @close="dialogVisible = false">
      <el-input type="textarea"
                placeholder="请输入驳回理由"
                v-model="rejectReason"></el-input>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitReason">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable'
  export default {
    name: 'ordinaryWithdrawal',
    data () {
      return {
        loading: false,
        dialogVisible: false,
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 20,
        columns: [
          {
            label: '提现申请时间',
            prop: 'createTime',
            align: 'center',
            width: 150,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
            }
          },
          {
            label: '申请账号',
            prop: 'loginName',
            align: 'center',
            width: 120,
            formatter: (row, cellValue) => {
              return row.doctorDto.loginName
            }
          },
          {
            label: '申请人姓名',
            prop: 'nickName',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.doctorDto.nickName
            }
          },
          {
            label: '执业单位',
            prop: 'hospitalName',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.doctorDto.hospitalName
            },
          },
          {
            label: '用户角色',
            prop: 'name',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.doctorDto.doctorTitleDto.name
            }
          },
          {
            label: '提现金额',
            prop: 'amount',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.amount ? Number(row.amount).toFixed(2) : '--'
            }
          },
          {
            label: '提现手续费',
            prop: 'serviceFee',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.serviceFee ? Number(row.serviceFee).toFixed(2) : '--'
            }
          },
          {
            label: '代扣个税',
            prop: 'taxFee',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.serviceFee ? Number(row.taxFee).toFixed(2) : '--'
            }
          },
          {
            label: '到账金额',
            prop: 'actualAmount',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.actualAmount ? Number(row.actualAmount).toFixed(2) : '--'
            }
          },
          {
            label: '提现账户类型',
            prop: 'type',
            align: 'center',
            formatter: (row, cellValue) => {
              if (row.type === 0) return <el-tag type="success">银行卡</el-tag>
              if (row.type === 1) return <el-tag type="danger">支付宝</el-tag>
              if (row.type === 2) return <el-tag type="warning">微信</el-tag>
            },
          },
          {
            label: '提现账户',
            prop: 'transferId',
            align: 'center',
            width: 120,
          },
          {
            label: '审核状态',
            prop: 'status',
            align: 'center',
            isSlot: 'status'
          },
          {
            label: '提现状态',
            prop: 'withdrawStatus',
            align: 'center',
            formatter: (row, cellValue) => {
              if (row.withdrawStatus === -1) {
                return '提现失败'
              } else if (row.withdrawStatus === 0) {
                return '提现成功'
              } else {
                return '待转账'
              }
            }
          },
          {
            label: '提现到账时间',
            prop: 'accountingDate',
            align: 'center',
            width: 150,
            formatter: (row, cellValue) => {
              if (row.accountingDate) {
                return this.commonFunction.timestampFormat(new Date(row.accountingDate), 'yyyy-MM-dd hh:mm:ss')
              } else {
                return '--'
              }
            }
          },
          {
            label: '失败原因',
            prop: 'remark',
            align: 'center',
            width: 120,
          },
          {
            width: 160,
            label: '操作',
            align: 'center',
            prop: 'option',
            isSlot: true
          }
        ],
        tableData: [],
        time: '',
        param: {
          searchCondition: '', // 用户名
          hospitalName: '', // 执业单位
          startTime: '',
          endTime: '',
          status: '', // 审核状态（0 待审核 1通过）
          withdrawStatus: '', // 提现状态
          withdrawType: 1, // 提现类型 0. 高灯 1. 非代缴税提现，平台转账 必传参数
        },
        doctorTitleNameList: [],
        currTime: [],
        dataObj: {},
        rejectReason: '' // 驳回理由
      }
    },
    watch: {
      currTime: {
        deep: true, // 深度监听
        handler (val) {
          this.getList()
        }
      }
    },
    methods: {
      changeTime (item) {
        this.currTime = item
        if (item) {
          this.param.startTime = item[0]
          this.param.endTime = item[1]
        } else {
          this.param.startTime = ''
          this.param.endTime = ''
        }
      },
      // 获取医生职位
      async getOffice () {
        const { data: res } = await this.post(this.api.doctorTitle.getPageAPP)
        if (res.code === '200') {
          this.doctorTitleNameList = res.object
        } else {
          this.$message.error(res.message)
        }
      },
      handleQuery() {
        this.pageIndex=1
        this.getList()
      },
      // 列表
      async getList () {
        this.loading = true

        const { data: res } = await this.post(this.api.withdraw.getWithdrawList, {
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          ...this.param
        })
        if (res.code === '200') {
          this.loading = false
          this.tableData = res.object
          this.pageTotal = res.totalNum
          // this.pageTotal = 40
        } else {
          this.$message.error(res.message)
        }

      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page
        this.getList()
      },
      // 操作
      async handleRowClick (row, op) {
        switch (op) {
          case 'transfer':
            this.$confirm('确认转账？')
              .then(async _ => {
                const { data: res } = await this.post(this.api.withdraw.passApplyWithdrawals, {
                  id: row.id
                })
                if (res.code === '200') {
                  this.$message.success('转账成功!')
                  this.getList()
                } else {
                  this.getList()
                }
              })
              .catch(_ => { });
            break;
          case 'reject':
            this.dataObj = row
            this.dialogVisible = true
            break;
        }

      },
      // 提交驳回理由
      async submitReason () {
        if (this.rejectReason === '') {
          this.$message.warning('请输入驳回理由!')
          return
        }
        const { data: result } = await this.post(this.api.withdraw.rejectApplyWithdrawals, {
          id: this.dataObj.id,
          rejectReason: this.rejectReason
        })
        if (result.code === '200') {
          this.$message.success('操作成功')
          this.dialogVisible = false
          this.getList()
        } else {
          this.$message.error(res.message)
        }

      }

    },
    created () {
      this.getOffice()
      this.getList()
    },
    components: {
      'element-table': elementTable,
    }
  }
</script>
<style scoped lang="scss">
  /deep/ .el-popover {
    color: #f00;
  }
</style>
